<template>
	<div>
		<el-card>
			<h2>容器的属性</h2>
			<ul>
				<li>flex-direction: 主轴的方向</li>
				<li>flex-wrap: wrap; 是否换行</li>
				<li>justify-content: center; 主轴的对齐方式</li>
				<li>align-items: center; 侧轴的对齐方式</li>
				<li>flex-flow = flex-direction + flex-wrap</li>
				<li>align-content: 多根轴在侧轴的对齐方式</li>
			</ul>
		</el-card>
		<el-card>
			<h2>项目的属性</h2>
			<ul>
				<li>order: 0; 数值越小靠前</li>
				<li>flex-grow: 1; 所占的比例</li>
				<li>
					flex-shrink: 1; <b>定义缩小比例</b> 默认值为1，空间不足的时候缩放比例，值为0的时候不缩放。
				</li>
				<li>flex-basis: 200px; 占据固定空间</li>
				<li>flex: grow(元素占据的比例，0/1) shrink(缩小的比例：0不缩小/1) basis(固定宽度);</li>
				<li>align-content: 多根轴在侧轴的对齐方式</li>
			</ul>
		</el-card>
		<section>
			<div class="item">1</div>
			<div class="item self">2</div>
			<div class="item">3</div>
			<div class="item">4</div>
			<div class="item shrink">5</div>
			<div class="item">6</div>
			<div class="item">7</div>
			<div class="item">8</div>
		</section>
	</div>
</template>

<script>
	export default {}
</script>

<style lang="scss" scoped>
	section {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		height: 300px;
		background-color: yellowgreen;
		box-sizing: border-box;
		box-sizing: content-box;
		.item {
			flex: 0 0 100px; // 该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
			height: 100px;
			background-color: tomato;
			&:nth-child(2n + 1) {
				background-color: yellow;
			}
		}
		.self {
			// order: 2;
			align-self: flex-start;
		}
		.shrink {
			background-color: turquoise;
			// flex-shrink: 4;
		}
	}
	ul {
		list-style: square;
	}
	// .div {
	// 容器的属性
	// display: flex;
	// flex-direction: row;
	// flex-flow: row wrap; // direction wrap的融合
	// justify-content: center;
	// align-content: center; // 侧轴多行的布局
	// align-items: center;
	// flex-wrap: wrap;

	// 项目的属性
	// order: 1;
	// flex-grow: inherit;
	// flex-shrink: unset;
	// flex-basis: auto;
	// flex: 1;
	// align-self: center; // 允许与其它不一样的对齐方式
	// }
	.el-card {
		margin: 10px;
	}
</style>
